<template>
  <div>
    <header class="simple-header van-hairline--bottom">
      <i class="nbicon nbfanhui" @click="$router.back()"></i>
      <van-search v-model="value" shape="round" @click-input="inp" placeholder="全场50元起步" />
      <van-button color="#1baeae" size="small">搜索</van-button>
    </header>
    <div class="block"></div>
    <van-tabs v-model="active" type="card" color="#1baeae">
      <van-tab title="推荐" name=""></van-tab>
      <van-tab title="新品" name="new"></van-tab>
      <van-tab title="价格" name="price"></van-tab>
    </van-tabs>
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="product-list-refresh">
        <van-list v-model:loading="loading" :finished="finished"
          :finished-text="productList.length ? '没有更多了' : '搜索想要的商品'" @load="onLoad" @offset="10">
          <!-- <p v-for="item in list" :key="item">{{ item }}</p> -->
          <template v-if="productList.length">
            <div class="product-item" v-for="(item, index) in productList" :key="index" @click="productDetail(item)">
              <img :src="$filters.prefix(item.goodsCoverImg)" />
              <div class="product-info">
                <p class="name">{{item.goodsName}}</p>
                <p class="subtitle">{{item.goodsIntro}}</p>
                <span class="price">￥ {{item.sellingPrice}}</span>
              </div>
            </div>
          </template>
          <img class="empty" v-else src="https://s.yezgea02.com/1604041313083/kesrtd.png" alt="搜索">
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
  import {
    ref,
    reactive,
    toRefs
  } from "vue"
  export default {
    setup() {
      const state = reactive({
        active: 0,
      })
      return {
        ...toRefs(state)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '../../common/style/mixin.less';

  .simple-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    .fj();
    .wh(100%, 44px);
    line-height: 44px;
    padding: 0 10px;
    .boxSizing();
    color: #252525;
    background: #fff;

    .van-button {
      margin: 6px 0;
    }

    .simple-header-name {
      font-size: 14px;
    }
  }

  .block {
    height: 50px;
  }

  .content {
    height: calc(~"(100vh - 70px)");
    overflow: hidden;
    overflow-y: scroll;
    margin-top: 78px;
  }

  .product-list-refresh {
    .product-item {
      .fj();
      width: 100%;
      height: 120px;
      padding: 10px 0;
      border-bottom: 1px solid #dcdcdc;

      img {
        width: 140px;
        height: 120px;
        padding: 0 10px;
        .boxSizing();
      }

      .product-info {
        width: 56%;
        height: 120px;
        padding: 5px;
        text-align: left;
        .boxSizing();

        p {
          margin: 0
        }

        .name {
          width: 100%;
          max-height: 40px;
          line-height: 20px;
          font-size: 15px;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .subtitle {
          width: 100%;
          max-height: 20px;
          padding: 10px 0;
          line-height: 25px;
          font-size: 13px;
          color: #999;
          overflow: hidden;
        }

        .price {
          color: @primary;
          font-size: 16px;
        }
      }
    }

    .empty {
      display: block;
      width: 150px;
      margin: 50px auto 20px;
    }
  }
</style>